<template>
<div>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple">
       <span class="icon">
                <i class="fa fa-eye"></i>
            </span>
            <span>浏览量</span>
            <span class="nums">123,345</span>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
      <span class="icon">
                <!-- <i class="fa fa-eye"></i> -->
            </span>
            <span>订单量</span>
            <span class="nums">123,213</span>
  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple">
       <span class="icon">
                <i class="fa fa-database" aria-hidden="true"></i>
            </span>
            <span>总金额</span>
            <span class="nums">425,534</span>
  </div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="16"><div class="b1 grid-content bg-purple">
      <span class="Bigtitle">
            <i class="fa fa-circle" aria-hidden="true" style="font-size:14px"></i>
            待办事项
        </span>
        <div class="things">
            <div class="item">
                <span class="small-title">共有30件待处理的订单</span>
                <br>
                <i class="fa fa-tasks" aria-hidden="true" style="font-size:40px"></i>
                <span class="content" style="font-size:40px">
                    商家产品重要的一步,就是为你的产品穿上了花的外套(文案),好的产品描述还能促进你和顾客之间的关系,不仅
                    可提高销售量,还能提高复购率.
                </span>
                <el-button class="dealwith" type="warning">立即处理</el-button>
            </div>
            <div class="item">
                <span class="small-title">共有25条待换货的订单</span>
                <br>
                <i class="fa fa-exchange" aria-hidden="true" style="font-size:40px"></i>
                <span class="content">
                    商家产品重要的一步,就是为你的产品穿上了花的外套(文案),好的产品描述还能促进你和顾客之间的关系,不仅
                    可提高销售量,还能提高复购率
                </span>
                <el-button class="dealwith" type="warning">立即处理</el-button>
            </div>
        </div>   
  </div></el-col>
  <el-col :span="8"><div class="b1 grid-content bg-purple"></div></el-col>
</el-row>
</div>
</template>
<style scoped>
.things{
    width: 100%;
    height: 100%;
    background-color: white;
    line-height: 15px;
}

.b1{
    height: 350px;
}
.grid-content span{
     position: relative;
    top: 50%;
    left: 0%;
    font-family: 'Courier New', Courier, monospace;
    font-size: large;
}
.grid-content .fa{
     font-size: 50px;
    left: -10%;
    top: 10px;
    position: relative;
    color: aliceblue;
}
 .el-row {
    margin-bottom: 20px;    
      margin-bottom: 0;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 10px;
    min-height: 150px;
    margin-top: 15px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
</style>